<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>东明家居集团-市场信息管理系统</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/iview.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" id="app">
     <!-- breadcrumb -->
      <template class="page-header">
          <breadcrumb class="pull-left">
              <breadcrumb-item to="welcome.html" >首页</breadcrumb-item>
              <breadcrumb-item>作业查询</breadcrumb-item>
          </breadcrumb>
      </template>
      <!-- 搜索条件 -->
      <div class="table-margin">
          <row>
              <i-col span="3" class-name="mr10" style="width:130px;">
                  <date-picker type="date" placeholder="开始日期" ></date-picker>
              </i-col>
              <i-col span="3" class-name="mr10" style="width:130px;">
                 <date-picker type="date" placeholder="结束日期" ></date-picker>
              </i-col>
              <i-col span="3" class-name="mr10" style="width:150px;">
                  <i-select v-model="model1" placeholder="中心/店面">
                      <i-option v-for="item in zhognxin" :value="item.value" :key="item.value" ></i-option>
                  </i-select>                  
              </i-col>
              <i-col span="3" class-name="mr10" style="width:130px;">
                  <i-select v-model="model2" placeholder="部门">
                      <i-option v-for="item in department" :value="item.value" :key="item.value" ></i-option>
                  </i-select>                  
              </i-col>
              <i-col span="6" class-name="mr10" style="width: 280px">
                  <i-select v-model="model3" placeholder="课程主题">
                      <i-option v-for="item in theme" :value="item.value" :key="item.value" ></i-option>
                  </i-select>                   
              </i-col>              
              <i-button type="primary" class="mr10">搜索</i-button>
          </row>
                          <!-- 加载中 -->
      
                    <spin fix>
                        <icon type="load-c" size=18 class="demo-spin-icon-load"></icon>
                        <div>Loading</div>
                    </spin>
               
      </div>
      <!-- 搜索结果 -->
      <div class="table-margin">
           <i-table :columns="columns1" :data="data1" algin="center" class="table_style"></i-table>
           <!-- 查看作业信息弹框开始 -->
           <modal v-model="modal1" title="查看作业信息" @on-ok="ok" @on-cancel="cancel" width='950'> 
                <div class="homework_con">观看《新中国从这里走来》有感 6月24日早上，参加了集团党委组织的《新中国从这里走来》五集纪录片，感受颇多。作为一名共产党员，作为一名土生土长的平山人，对西柏坡的历史知之甚少。通过系统观看，认真细致地回顾学习和西柏坡在解放战争时期发挥的历史作用。身为石家庄人，深感自豪和骄傲。 尤其是土改运动，七届二中全会，对新中国的成立、发展奠定了坚定的基础。在名不见经传的小山村指挥了包括三大战役等全国解放战争几十个，是最后一个农村指挥所。 结合自身的工作，作为党员，在岗位上要发扬老一辈革命传统教育，要以党员的身份，做好本职工作，要不忘历史，牢记使命，要把公司的发展和个人自身的发展有效结合起来，要把工作当做是事业来干，全身心投入到工作当中去。为公司的发展和建设作出自己应有的贡献。 党员身份永不能忘。日常工作中要敢于叫响看我的、跟我来，时时处处事事走在群众前面。 </div>
                <div class="homework_numb">共<span>200</span>字</div>                         
           </modal>
          <!-- 查看作业信息弹框结束 -->       
      </div>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/iview.min.js"></script>
<script>
    var Main = {
        data () {
            return {
                zhognxin: [           //中心店面
                    {
                        value: '东二环店',
                        label: '东二环店'
                    },
                    {
                        value: '西二环店',
                        label: '西二环店'
                    },
                    {
                        value: '北二环店',
                        label: '北二环店'
                    }
                ],
                department: [        //部门
                    {
                        value: '办公室',
                        label: '办公室'
                    },
                    {
                        value: '销售部',
                        label: '销售部'
                    },
                    {
                        value: '财务室',
                        label: '财务室'
                    }
                ],
                theme: [             //课程主题
                    {
                        value: '厉害了我的国',
                        label: '厉害了我的国'
                    },
                    {
                        value: '消防知识',
                        label: '消防知识'
                    }
                ],                
                model1: '',
                model2: '',
                model3: '',
                modal1: false,   
             
      //搜索结果
                columns1: [  
                    {
                        type: 'index',
                        title: '序号',
                        width:46,
                        align: 'center',
                    },         
                    {
                        title: '中心/店面',
                        key: 'zhongxin',
                        align: 'center',
                    },
                    {
                        title: '部门',
                        key: 'department',
                        align: 'center',
                    },                    
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '课程主题',
                        key: 'theme',
                        align: 'center',
                        width:500
                    },
                    {
                        title: '开课时间',
                        key: 'startime',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'searchhomework',
                        align: 'center',
                        render:(h,params)=>{
                                return h('a', {

                                    on: {
                                        click: () => {
                                            this.searchhomework();
                                        }
                                    }
                                },'查看作业');
                        }
                    }               
                ],
                data1: [
                    {
                        zhongxin: '东二环店',
                        department: '销售部',
                        name:'张三',
                        theme: '厉害了我的过',
                        startime:'2018-05-12',
                        trainnumb:'80',
                    },                   
                    {
                        zhongxin: '东二环店',
                        department: '销售部',
                        name:'张三',
                        theme: '厉害了我的过',
                        startime:'2018-05-12',
                        trainnumb:'80',
                    },                       
                ],           
            }
        },
        methods: {
            ok () {  
            },
            cancel () {     
            },
            searchhomework(){
                this.modal1=true;
            }
        },
    }
    var Component = Vue.extend(Main)
    new Component().$mount('#app')
</script>
</html>

  

  

  

  

  
